import { ReloadOutlined, SaveOutlined } from '@ant-design/icons';
import { PageContainer } from '@ant-design/pro-components';
import {
  Button,
  Card,
  Col,
  Divider,
  Form,
  Input,
  InputNumber,
  message,
  Row,
  Select,
  Switch,
} from 'antd';

const Settings: React.FC = () => {
  const [form] = Form.useForm();

  const handleSave = (values: any) => {
    console.log('保存设置:', values);
    message.success('设置保存成功！');
  };

  const handleReset = () => {
    form.resetFields();
    message.info('已重置为默认设置');
  };

  return (
    <PageContainer>
      <Row gutter={[24, 24]}>
        <Col span={12}>
          <Card title="基础设置" bordered={false}>
            <Form
              form={form}
              layout="vertical"
              initialValues={{
                siteName: '管理系统',
                siteUrl: 'https://admin.example.com',
                description: '基于 Ant Design Pro 构建的现代化管理系统',
                language: 'zh-CN',
                timezone: 'Asia/Shanghai',
              }}
            >
              <Form.Item
                label="站点名称"
                name="siteName"
                rules={[{ required: true, message: '请输入站点名称' }]}
              >
                <Input placeholder="请输入站点名称" />
              </Form.Item>

              <Form.Item
                label="站点 URL"
                name="siteUrl"
                rules={[{ required: true, message: '请输入站点 URL' }]}
              >
                <Input placeholder="https://example.com" />
              </Form.Item>

              <Form.Item label="系统描述" name="description">
                <Input.TextArea rows={3} placeholder="请输入系统描述" />
              </Form.Item>

              <Form.Item label="语言" name="language">
                <Select>
                  <Select.Option value="zh-CN">简体中文</Select.Option>
                  <Select.Option value="en-US">English</Select.Option>
                  <Select.Option value="ja-JP">日本語</Select.Option>
                </Select>
              </Form.Item>

              <Form.Item label="时区" name="timezone">
                <Select>
                  <Select.Option value="Asia/Shanghai">
                    Asia/Shanghai
                  </Select.Option>
                  <Select.Option value="Asia/Tokyo">Asia/Tokyo</Select.Option>
                  <Select.Option value="America/New_York">
                    America/New_York
                  </Select.Option>
                </Select>
              </Form.Item>
            </Form>
          </Card>
        </Col>

        <Col span={12}>
          <Card title="系统配置" bordered={false}>
            <Form
              layout="vertical"
              initialValues={{
                enableNotifications: true,
                enableRegistration: false,
                enableMaintenance: false,
                sessionTimeout: 30,
                maxUploadSize: 10,
                defaultTheme: 'light',
              }}
            >
              <Form.Item
                label="启用系统通知"
                name="enableNotifications"
                valuePropName="checked"
              >
                <Switch checkedChildren="开" unCheckedChildren="关" />
              </Form.Item>

              <Form.Item
                label="允许用户注册"
                name="enableRegistration"
                valuePropName="checked"
              >
                <Switch checkedChildren="开" unCheckedChildren="关" />
              </Form.Item>

              <Form.Item
                label="维护模式"
                name="enableMaintenance"
                valuePropName="checked"
              >
                <Switch checkedChildren="开" unCheckedChildren="关" />
              </Form.Item>

              <Form.Item label="会话超时时间 (分钟)" name="sessionTimeout">
                <InputNumber min={5} max={480} style={{ width: '100%' }} />
              </Form.Item>

              <Form.Item label="最大上传大小 (MB)" name="maxUploadSize">
                <InputNumber min={1} max={100} style={{ width: '100%' }} />
              </Form.Item>

              <Form.Item label="默认主题" name="defaultTheme">
                <Select>
                  <Select.Option value="light">浅色主题</Select.Option>
                  <Select.Option value="dark">深色主题</Select.Option>
                  <Select.Option value="compact">紧凑主题</Select.Option>
                </Select>
              </Form.Item>
            </Form>
          </Card>
        </Col>
      </Row>

      <Card bordered={false} style={{ marginTop: 24 }}>
        <div style={{ textAlign: 'center' }}>
          <Button
            type="primary"
            icon={<SaveOutlined />}
            onClick={() => form.submit()}
            style={{ marginRight: 16 }}
          >
            保存设置
          </Button>
          <Button icon={<ReloadOutlined />} onClick={handleReset}>
            重置
          </Button>
        </div>
      </Card>
    </PageContainer>
  );
};

export default Settings;
